<template lang="html">
  <el-dialog :title="title+'客户'" v-model="dialogFormVisible" size="tiny" textarea>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="客户账号:" :label-width="formLabelWidth">
        <el-input v-model="form.userid"></el-input>
      </el-form-item>
      <el-form-item label="客户密码:" :label-width="formLabelWidth">
        <el-input type="password" v-model="form.userpassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码:" :label-width="formLabelWidth">
        <el-input type="password" v-model="form.userpassword1"></el-input>
      </el-form-item>
      <el-form-item label="客户姓名:" :label-width="formLabelWidth">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="电话:" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:" :label-width="formLabelWidth" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="地址:" :label-width="formLabelWidth" prop="email">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="状态:" :label-width="formLabelWidth">
        <el-radio class="status" v-model="form.status" label="1">有效</el-radio>
        <el-radio class="status" v-model="form.status" label="0">无效</el-radio>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import * as User from '../../../api/user.js'
import {
  form_init
} from '../../../helpers.js'
import {
  usernameCheck,
  emailCheck,
  phoneCheck
} from '../../rules.js'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object
    }
  },
  data: function() {
    return {
      formLabelWidth: '100px',
      dialogFormVisible: this.value,
      form: {
        id: null,
        userid: null,
        userpassword: null,
        userpassword1: null,
        username: '',
        phone: '',
        email: '',
        address: '',
        status: '1',
      },
      rules: {
        username: [{
          required: true,
          message: '请输入姓名',
        }],
        email: [{
          required: true,
          validator: emailCheck,
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          validator: phoneCheck,
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.info) {
            User.update(this.form.id, this.form).then(data => {
              this.$message.success('编辑成功');
              this.$emit('submit', this.form);
            })
            this.dialogFormVisible = false;
          } else {
            User.store(this.form).then(data => {
              this.$message.success('新增成功');
              this.form.id = data.data;
              this.$emit('submit', this.form);
            })
            this.dialogFormVisible = false;
          }
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    title: function() {
      return this.info ? "编辑" : "新增";
    }
  },
  watch: {
    value(val) {
      this.dialogFormVisible = val;
    },
    dialogFormVisible(val) {
      this.$emit('input', val);
    },
    info(info) {
      form_init(info, this.form);
    }
  }
}
</script>
<style lang="css">
</style>
